<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tech Blog</title>
    <link rel="stylesheet" href="styles/main.css">
    <!-- 引入Google字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <nav class="navbar">
        <div class="nav-brand">TechBlog</div>
        <div class="nav-links">
            <a href="#" class="active">首页</a>
            <a href="#">文章</a>
            <a href="#">关于</a>
            <a href="#">联系</a>
        </div>
    </nav>

    <header class="hero">
        <div class="hero-content">
            <h1>探索科技的未来</h1>
            <p>分享最新的技术见解和创新思维</p>
        </div>
    </header>

    <main class="container">
        <section class="featured-posts">
            <h2>精选文章</h2>
            <div class="post-grid">
                <article class="post-card">
                    <div class="post-image"></div>
                    <div class="post-content">
                        <span class="post-tag">AI</span>
                        <h3>人工智能的未来发展</h3>
                        <p>探讨AI技术的最新进展和未来可能的发展方向...</p>
                        <div class="post-meta">
                            <span><i class="far fa-clock"></i> 2024-03-20</span>
                            <span><i class="far fa-eye"></i> 1.2k</span>
                        </div>
                    </div>
                </article>

                <article class="post-card">
                    <div class="post-image"></div>
                    <div class="post-content">
                        <span class="post-tag">Web3</span>
                        <h3>区块链技术革新</h3>
                        <p>深入解析区块链技术如何改变传统行业...</p>
                        <div class="post-meta">
                            <span><i class="far fa-clock"></i> 2024-03-18</span>
                            <span><i class="far fa-eye"></i> 980</span>
                        </div>
                    </div>
                </article>

                <article class="post-card">
                    <div class="post-image"></div>
                    <div class="post-content">
                        <span class="post-tag">Cloud</span>
                        <h3>云计算新趋势</h3>
                        <p>探索企业级云计算解决方案的最新发展...</p>
                        <div class="post-meta">
                            <span><i class="far fa-clock"></i> 2024-03-15</span>
                            <span><i class="far fa-eye"></i> 756</span>
                        </div>
                    </div>
                </article>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h4>关于我们</h4>
                <p>专注于分享最新科技资讯和技术见解</p>
            </div>
            <div class="footer-section">
                <h4>快速链接</h4>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">文章</a></li>
                    <li><a href="#">关于</a></li>
                    <li><a href="#">联系</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>关注我们</h4>
                <div class="social-links">
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-github"></i></a>
                    <a href="#"><i class="fab fa-linkedin"></i></a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 TechBlog. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>